<template>
  <div>
    <el-dialog :append-to-body="append" :center="true" :title="title" :visible.sync="formVisibleDown" width="60%" :before-close="() => {$emit('update:formVisibleDown', false), $refs['ruleForm'].resetFields()}">
      <div class="from_box">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
          <el-form-item label-width="140px" label="请选择模块" prop="checkedFiled">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;" />
            <el-checkbox-group v-model="checkedFiled" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="(item, index) in optionsModul" :key="index" :label="item">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <div style="text-align: center;">
              <el-button type="primary" :loading="isbtn" @click="submitForm('ruleForm')">保存</el-button>
              <el-button @click="handleCancelDown">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 导出地址
    url: {
      type: String,
      default: ''
    },
    // 搜索参数
    searchParam: {
      type: Object,
      default() {
        return {}
      }
    },
    formVisibleDown: {
      type: Boolean,
      default: false
    },
    append: {
      type: Boolean,
      default: false
    },
    /**
     * 字段参数
     * ep:
     * [
     *  { key: 'id', label: 'id' }
     * ]
     * */
    optionsModul: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: '选择下载字段'
    }
  },
  data() {
    return {
      checkAll: false,
      checkedFiled: [],
      isIndeterminate: true,
      ruleForm: {
        checkedFiled: ''
      },
      isbtn: false,
      rules: {
        checkedFiled: [
          { required: true, message: '请选择至少一个字段', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 关闭
    handleCancelDown() {
      this.$emit('update:formVisibleDown', false)
      this.checkedFiled = []
    },
    handleCheckAllChange(val) {
      this.checkedFiled = val ? this.optionsModul : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.optionsModul.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.optionsModul.length
    },
    submitForm(formName) {
      if (this.checkedFiled.length > 0) {
        this.ruleForm.checkedFiled = this.checkedFiled
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isbtn = true
          let data = {}
          data.exportField = this.checkedFiled.map((arr) => {
            return {
              filed: arr.key,
              title: arr.label
            }
          })
          data = Object.assign(data, this.searchParam)
          this.$http.post(this.url, data).then((res) => {
            window.location.href = res.data
            this.isbtn = false
          }).catch(() => {
            this.isbtn = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
